import React, { useState } from "react";
import { Row, Col, Avatar, Input, Button, Upload } from 'antd';
import COS, { CosError } from "cos-js-sdk-v5";
import styles from "../index.less"
import { DownloadOutlined, UploadOutlined } from '@ant-design/icons';
const { TextArea } = Input;


const Bucket = "sss-1306551685"; /* 存储桶 */
const Region = "ap-guangzhou";
const cos = new COS({
    SecretId: "AKIDg9NL2SdXAXeV6QTGmDTUIsDJ9j5C3f17",
    SecretKey: "rSmriJflcDYeW9WdT3MPCk12mHXYKsBE",
});

interface IChat {
    onSend: Function;
    onSendPic: Function;
    user: any;
}

const SendMessage: React.FC<IChat> = ({
    onSend,
    user,
    onSendPic
}): React.ReactElement => {

    const [values, setValues] = useState('');
    const [isState, setIstate] = useState(null);

    const onChange = (e: any) => {
        setValues(e.target.value);
    };
    const onbtnSend = () => {
        if (values === '') {
            return;
        }
        let msg = {
            nid: new Date().getTime(),
            id: user.id,
            receive_id: user.receive_id,
            name: user.username,
            content: values,
            msgType: 2,
            textType: "文字",
            pic: user.pic
        }
        onSend(msg);
        setValues('');
    };

    function uploadChange(fileData: any, url: string) {
        const files = {
            Body: "",
            Bucket: "",
            Key: "",
            Region: "",
        };
        files.Body = fileData;
        files.Bucket = Bucket;
        // files.Bucket = Bucket
        files.Key = url + "/" + fileData.name;
        files.Region = Region;
        let arrList = [];
        arrList.push(files);

        cos.uploadFiles(
            {
                files: arrList,
                SliceSize: 1024 * 1024 * 10,
                /* 设置大于10MB采用分块上传 */
                onProgress: function (info: any) { },
                onFileFinish: function (err: CosError, options: any) {
                    console.log(options);

                    setIstate(options);
                },
            },
            (err: any, data: any) => {
                if (err) {
                    console.log("上传失败", err);
                    return;
                }
            }
        );
    }


    const onLoad = (e: any) => {
        let url = "Videonumber";
        uploadChange(e, url)
        let timer = setInterval(() => {
            if (isState !== null) {
                clearInterval(timer);

            }
        }, 1000)

        console.log(e);
        let msg = {
            nid: new Date().getTime(),
            id: user.id,
            receive_id: user.receive_id,
            name: user.username,
            content: e.name,
            msgType: 2,
            textType: "图片",
            pic: user.pic
        }
        onSendPic(msg);

    }

    return (
        <div className={styles.SendMessage}>
            <Row>
                <Col span={1}>
                    <Avatar size={40} src={user.pic} />
                </Col>
                <Col span={18}  >
                    <TextArea value={values} placeholder="textarea with clear icon" allowClear onChange={onChange} />
                    <Upload style={{ marginTop: '10px' }} beforeUpload={onLoad} >
                        <Button icon={<UploadOutlined />}>发送图片</Button>
                    </Upload>
                </Col>
                <Col span={2} offset={1} >
                    <Button type="primary" onClick={onbtnSend} icon={<DownloadOutlined />} size='large'>
                        发送
                    </Button>
                </Col>
            </Row>

        </div>
    )
}
export default SendMessage;